import { defineComponent, onMounted, reactive, ref } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import styles from "./cacheList.module.less";
import { $cacheClearData, $cacheList } from "@/api/systemConfiguration/systemConfiguration";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import cacheManageService from "@/modules/systemConfiguration/cacheManage/cacheManage.service";
import useNavigator from "@/hooks/useNavigator";
export default defineComponent({
  name: 'cacheList',
  setup() {
    const navigator = useNavigator();
    const router = useRouter();
    const state = reactive({
      toolbar: {
        left: ["refresh",],
        right: ["filter"],
      },
      dataSource: [],
      columns: [
        {
          title: "缓存类型",
          dataIndex: "name",
          align: "center",
          width: "150px",
        },
        {
          title: "备注说明",
          dataIndex: "desc",
          align: "center",
          width: "200px",
        },
        {
          fixed: "right",
          title: "操作",
          dataIndex: "operation",
          align: "center",
          width: "160px",
        }
      ],
      loading: false,
    } as any);

    onMounted(() => {
      $cacheList().then((res: any) => {
        state.dataSource = res.data || [];
      })
    })

    const detail = (item: any) => {
      if (item.type === 'data') {
        router.push('/systemConfiguration/cacheListDetail')
      }
    }
    const LTableRef = ref(null as any);
    const $service = new cacheManageService();
    return () => (
      <Page>
        <CardWithTitle title="缓存管理">
          <LTable
            ref={LTableRef}
            toolbar={state.toolbar}
            service={$service}
            v-model={state}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              loading={state.loading}
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  //操作
                  if (column.dataIndex === "operation") {
                    return (
                      <div class="operation">
                        {
                          record.type === "data" && <>
                            <a-button
                              type="primary"
                              onClick={() => {
                                $cacheClearData().then((res: any) => {
                                  message.success('清除成功')
                                })
                              }}
                            >
                              一键清除
                            </a-button>
                            <a-button type="primary" 
                              onClick={()=>{ navigator.push('/systemConfiguration/cacheListDetail')}}
                            >
                              数据缓存标签列表
                            </a-button>
                          </>
                        }
                      </div>
                    )
                  }
                },
              }}
            />
          </LTable>
        </CardWithTitle>
      </Page>
    )
  }
})